<template>
  <view>
    <view class="slot-box">
      <view style="width: 100%;">
        <uni-search-bar
            v-model="queryParams.params.findApi"
            type="text"
            @confirm="handleQuery"
            @input="handleQuery"
            placeholder="请输入文档名称或用印人"/>
      </view>
    </view>
    <view v-if="!!dataList && dataList.length > 0">
      <uni-card :is-shadow="false" v-for="(item,index) in dataList" :key="index">
        <p class="grid-integral">用印人名称：{{ item.userName }}</p>
        <p class="grid-integral">用印文档名称：{{ item.contractName }}</p>
        <p class="grid-integral">用印次数：{{ item.useNum }}</p>
        <p class="grid-integral">用印时间：{{ item.createTime }}</p>
      </uni-card>
    </view>
    <!-- 加载更多 -->
    <uni-load-more color="#00a660" :status="loadStatus"/>
  </view>
</template>

<script>

import {listSealUseRecord} from "@/api/ec/person/user/sealUseRecord";

export default {
  props: {
    data: {type: Object}
  },
  data() {
    return {
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 总条数
      total: 0,
      // 签署流量包订单表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sealId: undefined,
        params: {
          findApi: undefined
        }
      },
    };
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询印章变更记录列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      this.queryParams.sealId = this.data.id;
      listSealUseRecord(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 上拉刷新回调 */
    loadMore() {
      if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
        this.loadStatus = 'loading';
        // 延迟500毫秒显示loading效果
        setTimeout(() => {
          // 执行查询的方法
          this.getList(false);
        }, 500)
      } else {
        // 停止加载
        this.loadStatus = 'noMore'
      }
    },
  }
};
</script>

